<template>
   <div class="profile-container">
    <nav-bar>
      <div  slot="center">个人中心</div>
    </nav-bar>
    <div class="user-container">


     <div class="user-info">
       <div class="content">
          <div class="info">
<!--            <van-uploader v-else :after-read="afterRead" v-if="userInfo.avatar_url === ''">-->
<!--              <img src="../../assets/image/user.png" alt="" >-->
<!--            </van-uploader>-->
            <van-uploader  :after-read="afterRead">
            <img  :src="userInfo.avatar_url" alt="">
            </van-uploader>
            <div class="detail-info">
              <p>昵称:{{ userInfo.name}}</p>
              <p>登录名:{{userInfo.email}}</p>
              <p>个性签名:hahhah</p>
            </div>
          </div>
       </div>
       <div class="content-item" @click="goMyCollection()">
         <div class="item-list">
           <span>我的收藏</span>
           <i class=" iconfont icon-fanhui"></i>
         </div>
       </div>

       <div class="content-item" @click="goOrderList()">
         <div class="item-list">
           <span>我的订单</span>
           <i class=" iconfont icon-fanhui"></i>
         </div>
       </div>

       <div class="content-item" @click="changeUserInfo()">
         <div class="item-list">
           <span>账号管理</span>
           <i class=" iconfont icon-fanhui"></i>
         </div>
       </div>

       <div class="content-item" @click="goUserAddress()">
         <div class="item-list">
           <span>地址管理</span>
           <i class=" iconfont icon-fanhui"></i>
         </div>
       </div>

       <div class="content-item">
         <div class="item-list">
           <span>关于我们</span>
           <i class=" iconfont icon-fanhui"></i>
         </div>
       </div>

     </div>
    </div>
     <tab-bar></tab-bar>
     <div class="btn" >
       <van-button class="logout-btn" @click="logOut" round type="primary">退出</van-button>
     </div>

   </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import TabBar from "../../components/tabbar/TabBar";
import {logOut} from "../../api/user/user";
import { Toast } from 'vant';
import {changeUserAvatar, getUserInfo} from "../../api/profile/profile";
export default {
  name: "Profile",
  components:{
    NavBar,
    TabBar
  },
  data(){
    return{
      userInfo:{}
    }

  },
  mounted() {
    this.getCurrentUserInfo()
  },
  methods:{

    async getCurrentUserInfo(){
      const res = await getUserInfo()
      if(res.status === 200){
        this.userInfo = res.data
        console.log(this.userInfo)
      }
      console.log(res);
    },
    changeUserInfo(){
      this.$router.push({path:'/setUserInfo'})
    },
    async afterRead(file){
      const res = await changeUserAvatar(file.content)
      console.log(res);
    },
    async logOut(){
      const res = await logOut()
      console.log(res);
      if(res.status === 204){
        Toast.success('退出成功')
        window.localStorage.removeItem('token')
        await this.$router.replace({path: '/login'})
      }else {
        Toast.fail('退出失败')
      }
    },
    // 跳转用户地址列表
    goUserAddress(){
      this.$router.push({path:'/addressList'})
    },
    // 跳转到订单列表
    goOrderList(){
      this.$router.push({path:'/orderList'})
    },
    goMyCollection(){
      this.$router.push({path:'/myCollection'})
    }
  }
}
</script>

<style scoped lang="css">
   .profile-container{
     height: 100vh;
   }
   .user-container{
     /*padding-top: 45px;*/
     /*padding-bottom: 50px;*/
     width: 100%;
     height: 100%;
     background-color: #eee;

   }
   .user-info{
     padding-top: 45px;
     width: 100%;

     height:120px ;
   }
   .content{
     background-image: url("../../assets/image/userContent.png");
     width: 100%;
     height: 100%;
     /*margin-top: 45px;*/
   }
   .info {
     display: flex;
     /*justify-content: center;*/
     align-items: center;
     /*padding-left: 20px;*/
     /*width: 100%;*/
     height: 100%;
     margin-left: 20px;


   }
   .user-center{
     position: unset;
   }
   img{
     width: 50px;
     height: 50px;
     border-radius: 50%;;
   }
   .detail-info{
     margin-left: 20px;
   }
   p{
     padding: 5px;
     color: #eeeeee;
     font-size: 14px;
     text-align: left;
   }
   .btn{
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .logout-btn{
     position: absolute;
     /*left: 10px;*/
     height: 40px;
     /*right: 10px;*/
     bottom: 80px;
     /*width: auto;*/
     margin:auto;
     width: 80%;
     /*transform: translateX(10%);*/
   }
   .content-item{
     width: 100%;
     /*height: 30px;*/
   }
   .item-list{
     display: flex;
     height: 100%;
     align-items: center;
     justify-content: space-between;
     font-size: 16px;
     padding: 10px;
     background-color: #fff;
     margin-top: 10px;

   }
   .item-list i{
     transform: rotate(180deg);
   }

</style>